<!--Theme-->
<template>
  <div style="overflow: auto; height: 100%">
    <div class="people" v-if="cateType == 'people'">
      <div v-for="(item, index) in peopleInfo" :key="index">
        <SinglePeople
          :id="item['value0']"
          :name="item['value1']"
          :avatar="item['value2']"
        ></SinglePeople>
      </div>
    </div>
    <el-divider
      content-position="left"
      v-if="cateType == 'people'"
    ></el-divider>
    <div
      v-infinite-scroll="load"
      infinite-scroll-immediate="true"
      infinite-scroll-disabled="disabled"
      infinite-scroll-distance="20"
    >
      <TypeShow :imgsUrl="imgsUrl" :imgsId="imgsId"></TypeShow>
    </div>
    <p v-if="loading">加载中...</p>
    <p v-if="noMore">
      <el-divider content-position="right">没有更多了</el-divider>
    </p>
  </div>
</template>

<script>
import { BASE_URL } from "../config";
import TypeShow from "../components/TypeShow.vue";
import SinglePeople from "../components/SinglePerson";
export default {
  data() {
    return {
      imgList: [],
      imgsUrl: [],
      imgsId: [],
      cateType: "",
      peopleInfo: Array,
      nextPage: 1,
      loading: false,
      noMore: false,
    };
  },
  components: {
    TypeShow,
    SinglePeople,
  },
  computed: {
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    load() {
      this.loading = true;
      this.cateType = this.$route.query.type;
      this.getData(this.cateType);
      setTimeout(() => {
        this.loading = false;
      }, 300);
    },

    async getPeopleOfGroup() {
      let res = await this.$get("/imgcenter/people/getImageGroup");
      this.peopleInfo = res.data["imageGroup"];
      for (var item of this.peopleInfo) {
        item["value2"] = BASE_URL + "/" + item["value2"];
      }
    },
    async getData(cateType) {
      let param = {
        type: cateType,
        pageNo: this.nextPage,
        pageSize: 25,
      };
      this.nextPage++;
      let res = await this.$get("/imgcenter/displayByType", param);

      this.imgList = res.data.imagePage["records"];
      this.noMore = this.nextPage > res.data.imagePage["pages"];
      for (var i = 0; i < this.imgList.length; i++) {
        this.imgsUrl.push(BASE_URL + "/" + this.imgList[i]["url"]);
        this.imgsId.push(this.imgList[i]["id"]);
      }
    },
  },
  mounted: function () {
    this.cateType = this.$route.query.type;
    if (this.cateType == "people") {
      this.getPeopleOfGroup();
    }
  },
};
</script>

<style lang="scss"  scoped>
.people {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
</style>
